<template>
	<view class="outer_box">
		<view class="info-v">
			<view class="info-box">
				<view class="">姓名：</view>
				<input type="text" v-model="name" value="" placeholder="请输入家人姓名" />
			</view>
		</view>
		<view class="info-v">
			<view class="info-box">
				<view class="">性别：</view>
				<view class="gender-box">
					<view class="gender">
						<image v-if="sex==1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
						<image v-if="sex!==1" @tap="selectsex" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
						<text @tap="selectsex">男</text>
						<image v-if="sex==2" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
						<image v-if="sex!==2" @tap="selectsex1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
						<text @tap="selectsex1">女</text>
					</view>

				</view>
			</view>
		</view>
		<view class="info-v">
			<view class="info-box">
				<view class="">手机号：</view>
				<input type="text" v-model="phone" value="" placeholder="请输入家人手机号" />
			</view>
		</view>
		<view class="info-v">
		<view class="info-box">
			<view class="">身份证号：</view>
			<input type="text" value="" v-model="idCard" placeholder="请输入家人身份证号" />
		</view>
		</view>
		<view class="info-v">
		<view class="info-box">
			<view class="box_left">关系管理：</view>
			<picker @change="bindPickerChange1" :value="id"  :range-key="'name'" :range="relation">
			      <view class="textname">{{relation[index].name?relation[index].name:'请选择'}}</view>
			      </picker>
			<!-- <input type="text" value="" placeholder="请选择家人身份" /> -->
			<image class="qianjin" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
		</view>
		</view>
		<view class="btn-box">
			<view class="btn" @tap="save">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				relation: [],
				id: 1,
				name: '',
				sex: 1,
				phone: '',
				idCard: ''
			}
		},
		onShow() {
			this.getrelation()
		},
		methods: {
			selectsex1(){
				this.sex = 2
			},
			selectsex(){
				this.sex = 1
			},
			save(){
				// uni.navigateBack(1)
				this.adduserrelation()
			},
			bindPickerChange1: function(e) {
				this.id = this.relation[e.target.value].id
				console.log(this.relation[e.target.value].id)
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			//获取家人身份
			getrelation(){
				this.$api_http.getrelation().then((res) => {
					if(res.data.code = 200){
						this.relation = res.data.dataMap
						console.log(res.data.dataMap)
					}
							
				})
			},
			//绑定家人
			adduserrelation(){
				// let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				// let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '手机号填写有误',
						duration: 1000,
						icon: "none"
					});
					return
				}
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
				if(reg.test(this.idCard) === false) { 
							uni.showToast({
								title: '身份证号码不正确',
								duration: 1000,
								icon: "none"
							});
					return
				} 
				if(this.name == ''){
					uni.showToast({
						title: '请填写姓名',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if(this.idCard == ''){
					uni.showToast({
						title: '请填写身份证号码',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if(this.phone == ''){
					uni.showToast({
						title: '请填写手机号码',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if(this.relation == ''){
					uni.showToast({
						title: '请填写手机号码',
						duration: 1000,
						icon: "none"
					});
					return
				}
				// if ( !_IDRe18.test(this.cardNo) && !_IDre15.test(this.cardNo)) {
				// 		uni.showToast({
				// 			title: '身份证号码不正确',
				// 			duration: 1000,
				// 			icon: "none"
				// 		});
				// 		return
				// }
				this.$api_http.adduserrelation({
					name: this.name,
					sex: this.sex,
					phone: this.phone,
					idCard: this.idCard,
					relation: this.id
				}).then((res) => {
					if(res.data.success){
						uni.showToast({
							title: '绑定成功',
							duration: 1000,
							icon: "none"
						});
						console.log(res.data.dataMap)
						// uni.navigateBack(1)
						uni.navigateBack({
							delta:1,
							animationDuration:1000
						})
					}else{
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
						}
							
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f8f8f8;
	}

	.outer_box {
		background-color: #f8f8f8;
		.btn-box {
			display: flex;
			justify-content: center;
		
			.btn {
				width: 78%;
				height: 100upx;
				background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				border-radius: 50upx;
				color: #FEFEFE;
				font-size: 32upx;
				line-height: 100upx;
				text-align: center;
				margin-top: 100rpx;
			}
		
		}
		.info-v {
			background: #FFFFFF;
			padding: 40rpx 20rpx;
			border-bottom: solid 2rpx #EEEEEE;
			.info-box {
				width: 100%;
				display: flex;
				align-items: center;
				.qianjin {
					width: 15rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}
				.textname{
					width: 508rpx;
					color:#000000;
					font-weight: 500;
					margin-right: ;
				}
				.gender-box {
					display: flex;
					flex: 3;

					.gender {
						display: flex;

						text {
							margin-right: 50rpx;
						}

						image {
							margin-right: 10rpx;
							width: 46rpx;
							height: 46rpx;
						}

					}
				}

				view {
					color: #333333;
					font-weight: bold;
					flex: 1;

				}

				input {
					flex: 3;
				}

			}
		}


	}
</style>
